<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PMP备考日历 - 47天冲刺计划</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
            color: #2d3748;
            line-height: 1.6;
            padding: 20px;
            min-height: 100vh;
        }
        
        .container {
            max-width: 1400px;
            margin: 0 auto;
            background-color: white;
            border-radius: 12px;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
            overflow: hidden;
        }
        
        header {
                    position:relative;
                    background: radial-gradient(circle at 20% 30%, #3b82f6 0%, #1e3a8a 40%, #0f172a 100%);
                    color:#fff;
                    padding:20px 32px 18px;
                    display:grid;
                    grid-template-columns:1.2fr 0.8fr;
                    gap:28px;
                    align-items:start;
                }
        header:before, header:after {content:""; position:absolute; inset:0; pointer-events:none;}
        header:before {background: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0) 60%);} 
        header:after {background: radial-gradient(circle at 85% 20%, rgba(99,102,241,0.4), rgba(99,102,241,0) 70%);} 
        .header-main {position:relative; z-index:1;}
        .header-side {position:relative; z-index:1; display:flex; flex-direction:column; gap:16px;}
        header h1 {margin:0 0 4px; font-size:2.4rem; font-weight:700; letter-spacing:0.5px;}
        /* subtitle与tag-line已移除以压缩头部高度 */
        .today-date {
                    font-size: 0.95rem;
                    font-weight: 600;
                    letter-spacing: 0.5px;
                    background: #ffffff;
                    color: #1e3a8a;
                    display: inline-flex;
                    align-items: center;
                    gap: 6px;
                    padding: 8px 18px;
                    border-radius: 40px;
                    position: relative;
                    border: 2px solid #3b82f6;
                    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
                    animation: pulseDate 3s ease-in-out infinite;
                    background-clip: padding-box;
        }
            .today-date i { color:#fff; }
                @keyframes pulseDate {
                    0%,100% { box-shadow:0 4px 12px rgba(0,0,0,0.15); }
                    50% { box-shadow:0 6px 18px rgba(59,130,246,0.35); }
                }
            .header-top {display:flex; align-items:center; gap:14px; flex-wrap:wrap;}
            .header-actions {display:flex; gap:12px; flex-wrap:wrap;}
                @media (max-width:700px){
                    .header-top { flex-direction:column; align-items:center; }
                    .header-left { text-align:center; }
                }
        
        h1 {
            font-size: 2.4rem;
            margin-bottom: 8px;
            font-weight: 700;
        }
        
        .subtitle {
            font-size: 1.2rem;
            opacity: 0.9;
            margin-bottom: 15px;
        }
        
        .exam-info {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 20px;
            flex-wrap: wrap;
            margin-top: 15px;
        }
        
        .exam-date {
            background-color: rgba(255, 255, 255, 0.2);
            padding: 8px 16px;
            border-radius: 50px;
            font-weight: 600;
            font-size: 1rem;
        }
        
        .countdown {
            font-size: 1.2rem;
            font-weight: 700;
            color: #fef3c7;
        }
        
        .phases {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            padding: 20px;
            background-color: #f8fafc;
            border-bottom: 1px solid #e2e8f0;
        }
        
        .phase {
            flex: 1;
            min-width: 220px;
            margin: 10px;
            padding: 18px;
            border-radius: 10px;
            text-align: center;
            color: white;
            font-weight: 600;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        
        .phase h3 {
            font-size: 1.3rem;
            margin-bottom: 8px;
        }
        
        .phase p {
            font-size: 0.95rem;
            opacity: 0.9;
        }
        
        /* 阶段配色重映射：1绿 2蓝 3紫 考试红 */
        .phase-1 { /* 第一阶段：绿色 */
            background: linear-gradient(135deg, #10b981 0%, #047857 100%);
        }
        .phase-2 { /* 第二阶段：蓝色 */
            background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
        }
        .phase-3 { /* 第三阶段：紫色 */
            background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
        }
        .phase-4 { /* 考试日：红色 */
            background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);
        }
        
        .calendar-container {
            padding: 25px;
        }
        
        .calendar-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }
        
        .calendar-title {
            font-size: 1.5rem;
            font-weight: 700;
            color: #1e3a8a;
        }
        
        .month-navigation {
            display: flex;
            gap: 10px;
        }
        
        .nav-btn {
            background: #3b82f6;
            color: white;
            border: none;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .nav-btn:hover {
            background: #2563eb;
            transform: scale(1.05);
        }
        
        .calendar {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 12px;
            margin-bottom: 25px;
        }
        
        .weekday-header {
            text-align: center;
            padding: 12px;
            background-color: #f1f5f9;
            border-radius: 8px;
            font-weight: 600;
            color: #475569;
            font-size: 0.95rem;
        }
        
        .day {
            background-color: #fff;
            border-radius: 8px;
            padding: 15px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
            transition: all 0.3s ease;
            border: 1px solid #e2e8f0;
            min-height: 160px;
            position: relative;
        }
        
        .day:hover {
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
        }
        
        .date {
            font-weight: 700;
            font-size: 1.1rem;
            margin-bottom: 8px;
            color: #1e293b;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        /* 阶段：白色底 + 左侧彩色粗边框 */
    /* 日历阶段左侧彩色边框同步新映射 */
    .calendar .day.phase-1 { background:#fff !important; border-left:8px solid #10b981 !important; }
    .calendar .day.phase-2 { background:#fff !important; border-left:8px solid #3b82f6 !important; }
    .calendar .day.phase-3 { background:#fff !important; border-left:8px solid #8b5cf6 !important; }
    .calendar .day.phase-4 { background:#fff !important; border-left:8px solid #ef4444 !important; }
        
        .today {
            background-color: #fff !important;
            border: 2px solid #3b82f6 !important;
        }
        
        .today .date {
            color: #1e40af;
        }
        
        .weekend {
            background-color: #fff;
        }
        
        .exam-day { /* 考试日改为红色主题 */
            background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%) !important;
            border: 2px solid #ef4444 !important;
        }
        .exam-day .date { color:#b91c1c; }
        
        .task {
            font-size: 0.82rem;
            margin-bottom: 6px;
            padding-left: 8px;
            border-left: 2px solid #3b82f6;
            display: flex;
            align-items: flex-start;
        }

        /* 任务前彩色小点：根据父级 day 的 phase 映射颜色 */
        .day.phase-1 .task span::before,
        .day.phase-2 .task span::before,
        .day.phase-3 .task span::before,
        .day.phase-4 .task span::before {
            content: "";
            display: inline-block;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            margin-right: 6px;
            position: relative;
            top: -1px;
        }
        .day.phase-1 .task span::before { background:#10b981; }
        .day.phase-2 .task span::before { background:#3b82f6; }
        .day.phase-3 .task span::before { background:#8b5cf6; }
        .day.phase-4 .task span::before { background:#ef4444; }

        /* 根据阶段调整任务左边框颜色 */
        .day.phase-1 .task { border-left-color:#10b981; }
        .day.phase-2 .task { border-left-color:#3b82f6; }
        .day.phase-3 .task { border-left-color:#8b5cf6; }
        .day.phase-4 .task { border-left-color:#ef4444; }

        /* 任务悬浮卡片 */
        .task-hover-card {
            position: fixed;
            background: rgba(255,255,255,0.92);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            color: #1e293b;
            border: 1px solid rgba(148,163,184,0.35);
            border-radius: 14px;
            box-shadow: 0 6px 22px rgba(0,0,0,0.18), 0 0 0 1px rgba(255,255,255,0.4) inset;
            padding: 15px 18px 14px 18px;
            width: 280px;
            z-index: 2000;
            pointer-events: none;
            display: none;
            font-size: 0.74rem;
            line-height: 1.5;
            animation: fadeIn .22s ease;
            position: fixed;
            overflow: hidden;
        }
        .task-hover-card:before {content:""; position:absolute; inset:0; background:linear-gradient(135deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0) 70%); pointer-events:none;}
        .task-hover-card:after {content:""; position:absolute; top:0; left:0; bottom:0; width:5px; background:var(--accent,#3b82f6); box-shadow:0 0 0 1px rgba(0,0,0,0.05), 0 0 8px var(--accent,#3b82f6);}
        .task-hover-card h4 {margin:0 0 8px; font-size:0.88rem; font-weight:700; display:flex; align-items:center; gap:6px; letter-spacing:.3px;}
        .task-hover-meta {display:grid; grid-template-columns:72px 1fr; gap:4px 10px; margin-bottom:10px;}
        .task-hover-meta span {color:#64748b; font-weight:500;}
        .task-hover-meta div {color:#334155;}
        .task-hover-tags {display:flex; flex-wrap:wrap; gap:6px;}
        .task-hover-tag {background:linear-gradient(135deg,#f1f5f9,#e2e8f0); border:1px solid #cbd5e1; padding:4px 9px; border-radius:18px; font-size:0.63rem; font-weight:600; color:#1e293b; letter-spacing:.4px; position:relative;}
        .task-hover-tag:before {content:""; position:absolute; left:6px; top:50%; transform:translateY(-50%); width:6px; height:6px; border-radius:50%; background:#3b82f6; box-shadow:0 0 0 1px rgba(0,0,0,0.05);}        
        .task-hover-divider {height:1px; background:linear-gradient(90deg, rgba(203,213,225,0.6), rgba(226,232,240,0.2)); margin:6px 0 10px; border-radius:2px;}
        @keyframes fadeIn {from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:translateY(0);} }
        .task-hover-phase-1 {--accent:#10b981;}
        .task-hover-phase-2 {--accent:#3b82f6;}
        .task-hover-phase-3 {--accent:#8b5cf6;}
        .task-hover-phase-4 {--accent:#ef4444;}
        .task-hover-phase-1 h4 {color:#047857;}
        .task-hover-phase-2 h4 {color:#1e40af;}
        .task-hover-phase-3 h4 {color:#6d28d9;}
        .task-hover-phase-4 h4 {color:#b91c1c;}
        
        .task i {
            margin-right: 6px;
            color: #94a3b8;
            cursor: pointer;
            margin-top: 2px;
            flex-shrink: 0;
        }
        
        .task.completed i {
            color: #10b981;
        }
        
        .task.completed {
            text-decoration: line-through;
            color: #64748b;
        }
        
        .progress-container {
            padding: 20px;
            background-color: #f8fafc;
            border-top: 1px solid #e2e8f0;
        }
                .header-progress-card {
                    background: rgba(255,255,255,0.15);
                    backdrop-filter: blur(6px);
                    border:1px solid rgba(255,255,255,0.35);
                    border-radius:16px;
                    padding:14px 20px 18px;
                    text-align:left;
                    position:relative;
                    overflow:hidden;
                    grid-column:1 / -1;
                    margin-top:18px;
                }
                .header-progress-card:before {
                    content:""; position:absolute; inset:0; background:linear-gradient(135deg, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0) 60%); pointer-events:none;
                }
                .header-progress-row {display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:4px;}
                .header-progress-title {font-size:0.8rem; font-weight:600; letter-spacing:0.5px; color:#f1f5f9; display:flex; align-items:center; gap:6px; margin:0;}
                .header-progress-bar-wrapper {height:16px; background:rgba(255,255,255,0.25); border-radius:10px; overflow:hidden; position:relative;}
                .header-progress-fill {height:100%; width:0%; background:linear-gradient(90deg,#10b981,#3b82f6,#8b5cf6,#ef4444); background-size:300% 100%; animation:moveGradient 6s linear infinite; border-radius:10px; box-shadow:0 2px 6px rgba(0,0,0,0.2); transition:width .8s ease;}
                @keyframes moveGradient {0%{background-position:0 0;}100%{background-position:300% 0;}}
                .header-progress-stats {display:flex; align-items:center; gap:8px; font-size:0.7rem; color:#e2e8f0; margin:0;}
                .header-progress-stats span {background:rgba(255,255,255,0.14); padding:3px 8px; border-radius:10px; line-height:1;}
            .header-progress-percent-badge {position:absolute; top:-10px; left:0; transform:translateX(-50%); background:#fff; color:#1e3a8a; font-weight:700; font-size:0.85rem; padding:6px 12px; border-radius:40px; box-shadow:0 4px 12px rgba(0,0,0,0.25); transition:left .8s ease;}
            @media (max-width:900px){ header {grid-template-columns:1fr; padding:30px 26px;} .header-side {order:2;} .header-progress-card {order:3;} .exam-info {order:4;} }
            @media (max-width:500px){ header h1 {font-size:2rem;} }
        
        .progress-bar {
            height: 16px;
            background-color: #e2e8f0;
            border-radius: 8px;
            overflow: hidden;
            margin: 15px 0;
        }
        
        .progress {
            height: 100%;
            background: linear-gradient(135deg, #3b82f6 0%, #10b981 100%);
            border-radius: 8px;
            width: 0%;
            transition: width 1s ease;
        }
        
        .progress-info {
            display: flex;
            justify-content: space-between;
            font-weight: 600;
            color: #1e293b;
            font-size: 0.95rem;
        }
        
        .controls {
            display: flex;
            justify-content: center;
            margin-top: 20px;
            gap: 12px;
        }
        
        button {
            padding: 10px 20px;
            background: #3b82f6;
            color: white;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            transition: background 0.3s;
            font-weight: 500;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        button:hover {
            background: #2563eb;
        }
        
        .legend {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            margin-top: 25px;
            padding-top: 15px;
            border-top: 1px solid #e2e8f0;
            gap: 15px;
        }
        
        .legend-item {
            display: flex;
            align-items: center;
            font-size: 0.85rem;
            color: #475569;
        }
        
        .color-dot {
            width: 12px;
            height: 12px;
            margin-right: 6px;
            border-radius: 50%;
        }
        
        @media (max-width: 1200px) {
            .calendar {
                grid-template-columns: repeat(4, 1fr);
            }
        }
        
        @media (max-width: 768px) {
            .calendar {
                grid-template-columns: repeat(2, 1fr);
            }
            
            .phases {
                flex-direction: column;
            }
            
            h1 {
                font-size: 1.9rem;
            }
            
            .calendar-header {
                flex-direction: column;
                gap: 15px;
            }
        }
        
        @media (max-width: 480px) {
            .calendar {
                grid-template-columns: 1fr;
            }
            
            .exam-info {
                flex-direction: column;
                gap: 10px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <div class="header-main">
                <div class="header-top">
                    <h1>PMP备考日历</h1>
                    <span id="todayDate" class="today-date"><i class="fa-solid fa-clock"></i> 加载中...</span>
                    <a href="十大知识领域和五大过程组.html" style="background:#fff; color:#1e3a8a; padding:8px 18px; font-size:.8rem; font-weight:600; border-radius:30px; text-decoration:none; border:2px solid #3b82f6; box-shadow:0 4px 12px rgba(0,0,0,0.15); transition:.3s;" onmouseover="this.style.background='#3b82f6'; this.style.color='#fff'" onmouseout="this.style.background='#fff'; this.style.color='#1e3a8a'">知识体系速览</a>
                    <a href="https://event.chinapmp.cn/PMP/LEAP/pmp/html/base_newsDetail.html?newstype=2&newsid=05f91a1b951d40c5a89bd84cec16c8d3" target="_blank" rel="noopener" style="background:#fff; color:#dc2626; padding:8px 18px; font-size:.8rem; font-weight:600; border-radius:30px; text-decoration:none; border:2px solid #dc2626; box-shadow:0 4px 12px rgba(0,0,0,0.15); transition:.3s;" onmouseover="this.style.background='#dc2626'; this.style.color='#fff'" onmouseout="this.style.background='#fff'; this.style.color='#dc2626'">官方通知详情</a>
                    <a href="https://event.chinapmp.cn/PMP/LEAP/pmp/html/index.html" target="_blank" rel="noopener" style="background:#fff; color:#0d9488; padding:8px 18px; font-size:.8rem; font-weight:600; border-radius:30px; text-decoration:none; border:2px solid #0d9488; box-shadow:0 4px 12px rgba(0,0,0,0.15); transition:.3s;" onmouseover="this.style.background='#0d9488'; this.style.color='#fff'" onmouseout="this.style.background='#fff'; this.style.color='#0d9488'">报考网址</a>
                </div>
            </div>
            <div class="header-side">
                <div class="exam-info">
                    <div class="exam-date">考试日期：2025年11月29日</div>
                    <div class="countdown" id="countdown">距离考试还有: --天</div>
                </div>
            </div>
            <div class="header-progress-card" id="headerProgress">
                <div class="header-progress-row">
                    <div class="header-progress-title"><i class="fa-solid fa-bullseye"></i> 综合进度</div>
                    <div class="header-progress-stats">
                        <span>已过去 <strong id="days-passed">0</strong> 天</span>
                        <span>剩余 <strong id="days-left">0</strong> 天</span>
                        <span>任务完成 <strong id="tasks-completed">0</strong>/<strong id="tasks-total">0</strong></span>
                    </div>
                </div>
                <div class="header-progress-bar-wrapper">
                    <div class="header-progress-fill" id="headerProgressFill"></div>
                    <div class="header-progress-percent-badge" id="headerProgressPercent">0%</div>
                </div>
            </div>
        </header>
        
        <div class="phases">
            <div class="phase phase-1">
                <h3>📗 第一阶段：知识奠基</h3>
                <p>10月12日 - 11月1日 (21天)</p>
                <p>系统学习知识体系，掌握核心概念</p>
            </div>
            <div class="phase phase-2">
                <h3>📘 第二阶段：强化刷题</h3>
                <p>11月2日 - 11月15日 (14天)</p>
                <p>大量练习，识别弱点，模拟考试</p>
            </div>
            <div class="phase phase-3">
                <h3>📒 第三阶段：最后冲刺</h3>
                <p>11月16日 - 11月27日 (12天)</p>
                <p>重点复习，调整状态，查漏补缺</p>
            </div>
            <div class="phase phase-4">
                <h3>🎯 考试日</h3>
                <p>11月29日</p>
                <p>全力以赴，沉着应考</p>
            </div>
        </div>
        
        <div class="calendar-container">
            <div class="calendar-header">
                <div class="calendar-title">2024年10月-11月备考日历</div>
                <div class="month-navigation">
                    <button class="nav-btn" id="prev-month"><i class="fas fa-chevron-left"></i></button>
                    <button class="nav-btn" id="next-month"><i class="fas fa-chevron-right"></i></button>
                </div>
            </div>
            
            <div class="calendar" id="calendar">
                <!-- 日历内容将通过JavaScript动态生成 -->
            </div>
            
            <div class="controls">
                <button id="markToday"><i class="fas fa-check-circle"></i>标记今日完成</button>
                <button id="resetAll"><i class="fas fa-redo"></i>重置所有任务</button>
            </div>
        </div>
        
        <!-- 原进度容器已移入头部 -->
        
        <div class="legend">
            <div class="legend-item">
                <div class="color-dot" style="background-color: #10b981;"></div>
                <span>第一阶段：知识奠基</span>
            </div>
            <div class="legend-item">
                <div class="color-dot" style="background-color: #3b82f6;"></div>
                <span>第二阶段：强化刷题</span>
            </div>
            <div class="legend-item">
                <div class="color-dot" style="background-color: #8b5cf6;"></div>
                <span>第三阶段：最后冲刺</span>
            </div>
            <div class="legend-item">
                <div class="color-dot" style="background-color: #ef4444;"></div>
                <span>考试日</span>
            </div>
        </div>
    </div>

    <!-- 任务悬浮卡片容器 -->
    <div id="taskHoverCard" class="task-hover-card"></div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 显示今日日期
            const todayDateEl = document.getElementById('todayDate');
            if (todayDateEl) {
                const now = new Date();
                const weekdaysMap = ['周日','周一','周二','周三','周四','周五','周六'];
                const formatted = `${now.getFullYear()}年${now.getMonth()+1}月${now.getDate()}日 (${weekdaysMap[now.getDay()]})`;
                todayDateEl.textContent = `今天：${formatted}`;
            }
            // 备考计划数据 - 完整的47天计划
            const studyPlan = [
                // 10月计划 (20天)
                { date: "10月12日", weekday: "六", phase: 1, tasks: ["制定学习计划", "熟悉PMBOK框架", "了解考试形式"] },
                { date: "10月13日", weekday: "日", phase: 1, tasks: ["项目整合管理", "制定项目章程", "制定项目管理计划"] },
                { date: "10月14日", weekday: "一", phase: 1, tasks: ["项目范围管理", "收集需求", "定义范围", "创建WBS"] },
                { date: "10月15日", weekday: "二", phase: 1, tasks: ["项目进度管理", "定义活动", "排列活动顺序", "估算活动持续时间"] },
                { date: "10月16日", weekday: "三", phase: 1, tasks: ["项目成本管理", "估算成本", "制定预算", "控制成本"] },
                { date: "10月17日", weekday: "四", phase: 1, tasks: ["项目质量管理", "规划质量管理", "管理质量", "控制质量"] },
                { date: "10月18日", weekday: "五", phase: 1, tasks: ["第一周复习", "整理笔记", "做章节练习题"] },
                { date: "10月19日", weekday: "六", phase: 1, tasks: ["项目资源管理", "规划资源管理", "估算活动资源", "获取资源"] },
                { date: "10月20日", weekday: "日", phase: 1, tasks: ["建设团队", "管理团队", "控制资源"] },
                { date: "10月21日", weekday: "一", phase: 1, tasks: ["项目沟通管理", "规划沟通管理", "管理沟通", "监督沟通"] },
                { date: "10月22日", weekday: "二", phase: 1, tasks: ["项目风险管理", "规划风险管理", "识别风险", "实施定性风险分析"] },
                { date: "10月23日", weekday: "三", phase: 1, tasks: ["实施定量风险分析", "规划风险应对", "实施风险应对", "监督风险"] },
                { date: "10月24日", weekday: "四", phase: 1, tasks: ["项目采购管理", "规划采购管理", "实施采购", "控制采购"] },
                { date: "10月25日", weekday: "五", phase: 1, tasks: ["项目相关方管理", "识别相关方", "规划相关方参与", "管理相关方参与"] },
                { date: "10月26日", weekday: "六", phase: 1, tasks: ["第二周复习", "整理知识体系", "做综合练习题"] },
                { date: "10月27日", weekday: "日", phase: 1, tasks: ["敏捷项目管理", "敏捷宣言与原则", "Scrum框架"] },
                { date: "10月28日", weekday: "一", phase: 1, tasks: ["看板方法", "极限编程(XP)", "精益开发"] },
                { date: "10月29日", weekday: "二", phase: 1, tasks: ["混合型项目管理", "敏捷度量指标", "敏捷合同类型"] },
                { date: "10月30日", weekday: "三", phase: 1, tasks: ["PMP考试技巧", "题目类型分析", "时间管理策略"] },
                { date: "10月31日", weekday: "四", phase: 1, tasks: ["公式与计算", "挣值管理", "关键路径法", "沟通渠道计算"] },
                
                // 11月计划 (27天)
                { date: "11月1日", weekday: "五", phase: 1, tasks: ["第一阶段总复习", "知识体系梳理", "模拟测试(50题)"] },
                { date: "11月2日", weekday: "六", phase: 2, tasks: ["第一次模拟考试", "全真模拟(180题)", "严格计时"] },
                { date: "11月3日", weekday: "日", phase: 2, tasks: ["模拟考试复盘", "分析错题", "查漏补缺"] },
                { date: "11月4日", weekday: "一", phase: 2, tasks: ["整合管理专题", "相关方管理专题", "刷题100道"] },
                { date: "11月5日", weekday: "二", phase: 2, tasks: ["范围与进度专题", "成本与质量专题", "刷题100道"] },
                { date: "11月6日", weekday: "三", phase: 2, tasks: ["资源与沟通专题", "风险与采购专题", "刷题100道"] },
                { date: "11月7日", weekday: "四", phase: 2, tasks: ["敏捷专题训练", "情景题专项", "刷题100道"] },
                { date: "11月8日", weekday: "五", phase: 2, tasks: ["计算题专项", "职业道德专题", "刷题100道"] },
                { date: "11月9日", weekday: "六", phase: 2, tasks: ["第二次模拟考试", "全真模拟(180题)", "严格计时"] },
                { date: "11月10日", weekday: "日", phase: 2, tasks: ["模拟考试复盘", "分析错题", "查漏补缺"] },
                { date: "11月11日", weekday: "一", phase: 2, tasks: ["弱点强化训练", "针对性刷题", "整理错题本"] },
                { date: "11月12日", weekday: "二", phase: 2, tasks: ["高频考点训练", "快速解题技巧", "刷题100道"] },
                { date: "11月13日", weekday: "三", phase: 2, tasks: ["第三次模拟考试", "全真模拟(180题)", "严格计时"] },
                { date: "11月14日", weekday: "四", phase: 2, tasks: ["模拟考试复盘", "分析错题", "查漏补缺"] },
                { date: "11月15日", weekday: "五", phase: 2, tasks: ["第二阶段总结", "整理高频错题", "制定冲刺计划"] },
                { date: "11月16日", weekday: "六", phase: 3, tasks: ["知识体系回顾", "快速浏览笔记", "重点概念记忆"] },
                { date: "11月17日", weekday: "日", phase: 3, tasks: ["公式与计算复习", "关键知识点记忆", "做50题保持手感"] },
                { date: "11月18日", weekday: "一", phase: 3, tasks: ["敏捷专题复习", "混合方法要点", "做50题保持手感"] },
                { date: "11月19日", weekday: "二", phase: 3, tasks: ["高频考点强化", "错题本复习", "做50题保持手感"] },
                { date: "11月20日", weekday: "三", phase: 3, tasks: ["第四次模拟考试", "全真模拟(180题)", "严格计时"] },
                { date: "11月21日", weekday: "四", phase: 3, tasks: ["模拟考试复盘", "最后查漏补缺", "调整备考策略"] },
                { date: "11月22日", weekday: "五", phase: 3, tasks: ["知识体系梳理", "快速记忆要点", "放松心态"] },
                { date: "11月23日", weekday: "六", phase: 3, tasks: ["错题本回顾", "公式最后记忆", "做30题保持手感"] },
                { date: "11月24日", weekday: "日", phase: 3, tasks: ["考试策略准备", "时间管理练习", "做30题保持手感"] },
                { date: "11月25日", weekday: "一", phase: 3, tasks: ["轻松复习", "只看重点", "不做新题"] },
                { date: "11月26日", weekday: "二", phase: 3, tasks: ["调整状态", "适当休息", "保证睡眠"] },
                { date: "11月27日", weekday: "三", phase: 3, tasks: ["最后准备", "检查考试物品", "放松心情"] },
                { date: "11月29日", weekday: "六", phase: 4, tasks: ["考试日", "早餐营养", "提前到场", "沉着应考"] }
            ];

            const calendar = document.getElementById('calendar');
            const headerProgressFill = document.getElementById('headerProgressFill');
            const headerProgressPercent = document.getElementById('headerProgressPercent');
            const daysPassed = document.getElementById('days-passed');
            const daysLeft = document.getElementById('days-left');
            const tasksCompleted = document.getElementById('tasks-completed');
            const tasksTotal = document.getElementById('tasks-total');
            const countdown = document.getElementById('countdown');
            const markTodayBtn = document.getElementById('markToday');
            const resetAllBtn = document.getElementById('resetAll');
            const prevMonthBtn = document.getElementById('prev-month');
            const nextMonthBtn = document.getElementById('next-month');
            
            let totalTasks = 0;
            let completedTasks = 0;
            let currentView = 'october'; // 'october' or 'november'
            
            // 计算倒计时
            function daysBetween(dateA, dateB) {
                // 只比较日期部分，消除时区/时间差影响
                const utcA = Date.UTC(dateA.getFullYear(), dateA.getMonth(), dateA.getDate());
                const utcB = Date.UTC(dateB.getFullYear(), dateB.getMonth(), dateB.getDate());
                return Math.round((utcB - utcA) / 86400000); // 可正可负
            }

            function updateCountdown() {
                // 设置考试日期为2025年11月29日
                const examDate = new Date(2025, 10, 29); // 月份0开始
                const today = new Date();
                let daysRemaining = daysBetween(today, examDate);
                if (daysRemaining < 0) {
                    countdown.textContent = '考试已结束';
                } else if (daysRemaining === 0) {
                    countdown.textContent = '今天考试，加油！';
                } else {
                    countdown.textContent = `距离考试还有: ${daysRemaining}天`;
                }
                return daysRemaining;
            }
            
            // 计算进度
            function updateProgress() {
                const examDate = new Date(2025, 10, 28); // 考试日期
                const startDate = new Date(2025, 9, 12); // 开始日期 2025年10月12日
                const today = new Date();
                
                // 计算总天数
                const totalDays = daysBetween(startDate, examDate);
                
                // 计算已过去天数
                const daysPassedCount = daysBetween(startDate, today);
                
                // 计算剩余天数
                const daysRemaining = daysBetween(today, examDate);
                
                // 确保天数在合理范围内
                const adjustedDaysPassed = Math.max(0, Math.min(daysPassedCount, totalDays));
                const adjustedDaysRemaining = Math.max(0, Math.min(daysRemaining, totalDays));
                
                const timeProgress = (adjustedDaysPassed / totalDays) * 100;
                
                // 更新任务完成进度
                tasksCompleted.textContent = completedTasks;
                const taskProgress = totalTasks > 0 ? (completedTasks / totalTasks) * 100 : 0;
                
                // 结合时间和任务完成度的综合进度
                const overallProgress = (timeProgress + taskProgress) / 2;
                if (headerProgressFill) {
                    headerProgressFill.style.width = `${overallProgress}%`;
                }
                if (headerProgressPercent) {
                    headerProgressPercent.textContent = `${Math.round(overallProgress)}%`;
                    // 动态定位徽章到当前进度中点
                    const wrapper = headerProgressFill.parentElement; // bar wrapper
                    const percent = overallProgress / 100; // 0..1
                    // 计算可移动范围（减去徽章自身宽度的一半避免溢出）
                    const badgeWidth = headerProgressPercent.offsetWidth || 60;
                    const wrapperWidth = wrapper.offsetWidth || 300;
                    let targetX = percent * wrapperWidth; // 进度终点
                    // 徽章应居中进度终点，减半宽度
                    targetX = targetX;
                    // 边界限制：最小为徽章宽度*0.5，最大为 wrapperWidth - badgeWidth*0.5
                    const minX = badgeWidth * 0.5;
                    const maxX = wrapperWidth - badgeWidth * 0.5;
                    targetX = Math.max(minX, Math.min(maxX, targetX));
                    headerProgressPercent.style.left = `${targetX}px`;
                }
                
                daysPassed.textContent = adjustedDaysPassed;
                daysLeft.textContent = adjustedDaysRemaining;
            }
            
            // 初始化倒计时和进度
            updateCountdown();
            
            // 生成日历
            function renderCalendar(view) {
                calendar.innerHTML = '';
                totalTasks = 0;
                
                // 添加星期标题
                const weekdays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
                weekdays.forEach(day => {
                    const dayHeader = document.createElement('div');
                    dayHeader.className = 'weekday-header';
                    dayHeader.textContent = day;
                    calendar.appendChild(dayHeader);
                });
                
                // 根据视图筛选日期
                const filteredDays = studyPlan.filter(day => {
                    if (view === 'october') {
                        return day.date.includes('10月');
                    } else {
                        return day.date.includes('11月');
                    }
                });
                
                // 渲染每一天
                filteredDays.forEach(day => {
                    const dayElement = document.createElement('div');
                    dayElement.className = 'day';
                    
                    // 添加阶段背景色 - 修复这里，确保每个日期都正确添加阶段类
                    dayElement.classList.add(`phase-${day.phase}`);
                    
                    // 标记周末
                    if (day.weekday === '六' || day.weekday === '日') {
                        dayElement.classList.add('weekend');
                    }
                    
                    // 标记今天（实际日期比较）
                    const today = new Date();
                    const todayStr = `${today.getMonth() + 1}月${today.getDate()}日`;
                    if (day.date === todayStr) {
                        dayElement.classList.add('today');
                    }
                    
                    // 标记考试日 - 使用与图例相同的颜色
                    if (day.date === '11月29日') {
                        dayElement.classList.add('exam-day');
                    }
                    
                    // 创建日期
                    const dateElement = document.createElement('div');
                    dateElement.className = 'date';
                    dateElement.innerHTML = `
                        ${day.date}
                    `;
                    dayElement.appendChild(dateElement);
                    
                    // 添加任务
                    day.tasks.forEach(task => {
                        totalTasks++;
                        const taskElement = document.createElement('div');
                        taskElement.className = 'task';
                        // 数据属性用于悬浮卡片
                        taskElement.dataset.date = day.date;
                        taskElement.dataset.phase = day.phase;
                        taskElement.dataset.task = task;
                        taskElement.dataset.weekday = day.weekday;
                        taskElement.innerHTML = `
                            <i class="far fa-circle"></i>
                            <span>${task}</span>
                        `;
                        
                        // 任务点击事件
                        taskElement.addEventListener('click', function(e) {
                            if (e.target.tagName === 'I' || e.target.tagName === 'SPAN') {
                                const icon = this.querySelector('i');
                                if (this.classList.contains('completed')) {
                                    this.classList.remove('completed');
                                    icon.classList.remove('fa-check-circle');
                                    icon.classList.add('fa-circle');
                                    completedTasks--;
                                } else {
                                    this.classList.add('completed');
                                    icon.classList.remove('fa-circle');
                                    icon.classList.add('fa-check-circle');
                                    completedTasks++;
                                }
                                updateProgress();
                            }
                        });
                        
                        // 悬浮事件
                        taskElement.addEventListener('mouseenter', function(e) {
                            const card = document.getElementById('taskHoverCard');
                            if (!card) return;
                            const phaseMap = {1:'第一阶段',2:'第二阶段',3:'第三阶段',4:'考试日'};
                            const iconMap = {1:'📗',2:'📘',3:'📒',4:'🎯'};
                            const phase = this.dataset.phase;
                            const date = this.dataset.date;
                            const weekday = this.dataset.weekday;
                            const title = this.dataset.task;
                            const isCompleted = this.classList.contains('completed');
                            card.className = 'task-hover-card task-hover-phase-' + phase;
                            // 动态标签: 根据阶段区分关注重点示例
                            const tagSets = {
                                1: ['框架理解','概念记忆','基础打牢'],
                                2: ['刷题训练','错题分析','速度提升'],
                                3: ['查漏补缺','状态调整','冲刺巩固'],
                                4: ['心态稳定','时间掌控','考前准备']
                            };
                            const tagsHtml = tagSets[phase].map(t => `<div class="task-hover-tag"><span class="tag-text">${t}</span></div>`).join('');
                            card.innerHTML = `
                                <h4>${iconMap[phase]} ${title}</h4>
                                <div class="task-hover-meta">
                                    <span>日期</span><div>${date} (${weekday})</div>
                                    <span>阶段</span><div>${phaseMap[phase]}</div>
                                    <span>状态</span><div>${isCompleted ? '已完成 ✅' : '未完成'}</div>
                                </div>
                                <div class="task-hover-divider"></div>
                                <div class="task-hover-tags">${tagsHtml}</div>
                            `;
                            card.style.display = 'block';
                            positionHoverCard(card, e);
                        });
                        taskElement.addEventListener('mousemove', function(e){
                            const card = document.getElementById('taskHoverCard');
                            if (card && card.style.display === 'block') positionHoverCard(card, e);
                        });
                        taskElement.addEventListener('mouseleave', function(){
                            const card = document.getElementById('taskHoverCard');
                            if (card) card.style.display='none';
                        });
                        dayElement.appendChild(taskElement);
                    });
                    
                    calendar.appendChild(dayElement);
                });
                
                // 更新任务总数
                tasksTotal.textContent = totalTasks;
                updateProgress();
            }
            
            // 初始渲染
            renderCalendar(currentView);
            
            // 月份导航
            prevMonthBtn.addEventListener('click', function() {
                if (currentView === 'november') {
                    currentView = 'october';
                    renderCalendar(currentView);
                }
            });
            
            nextMonthBtn.addEventListener('click', function() {
                if (currentView === 'october') {
                    currentView = 'november';
                    renderCalendar(currentView);
                }
            });
            
            // 标记今日完成按钮
            markTodayBtn.addEventListener('click', function() {
                const todayElement = document.querySelector('.today');
                if (todayElement) {
                    const tasks = todayElement.querySelectorAll('.task');
                    tasks.forEach(task => {
                        if (!task.classList.contains('completed')) {
                            task.classList.add('completed');
                            const icon = task.querySelector('i');
                            icon.classList.remove('fa-circle');
                            icon.classList.add('fa-check-circle');
                            completedTasks++;
                        }
                    });
                    updateProgress();
                }
            });
            
            // 重置所有任务按钮
            resetAllBtn.addEventListener('click', function() {
                const tasks = document.querySelectorAll('.task');
                tasks.forEach(task => {
                    task.classList.remove('completed');
                    const icon = task.querySelector('i');
                    icon.classList.remove('fa-check-circle');
                    icon.classList.add('fa-circle');
                });
                completedTasks = 0;
                updateProgress();
            });
            
            // 悬浮卡片定位函数
            function positionHoverCard(card, e){
                const padding = 12;
                const cardRect = card.getBoundingClientRect();
                let x = e.clientX + 16;
                let y = e.clientY + 16;
                const vw = window.innerWidth;
                const vh = window.innerHeight;
                if (x + cardRect.width + padding > vw) x = e.clientX - cardRect.width - 20;
                if (y + cardRect.height + padding > vh) y = e.clientY - cardRect.height - 20;
                card.style.left = x + 'px';
                card.style.top = y + 'px';
            }

            // 每天更新倒计时
            setInterval(updateCountdown, 86400000); // 24小时更新一次
        });
    </script>
</body>
</html>